<!DOCTYPE html>
<html><head>
    <style>
        .demo-card-square.mdl-card {
            width: 320px;
            height: 320px;
            float: left;
            margin: 1rem;
            position: relative;
        }

        .demo-card-square.mdl-card:hover {
            box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
        }

        .demo-card-square > .mdl-card__title {
            color: #fff;
            background: #03a9f4;
        }

        .demo-card-square > .mdl-card__accent {
            background: #ff9800;
        }

        body {
            padding: 20px;
            background: #fafafa;
            position: relative;
        }
    </style></head><body>




<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-orange.min.css">




<!-- Square card -->
<div class="mdl-card mdl-shadow--2dp demo-card-square">
    <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Card 1</h2>
    </div>
    <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">
            Action
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
    </div>
</div>
<!-- Square card -->
<div class="mdl-card mdl-shadow--2dp demo-card-square">
    <div class="mdl-card__title mdl-card__accent mdl-card--expand">
        <h2 class="mdl-card__title-text">Card 2</h2>
    </div>
    <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">
            Action
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
    </div>
</div>
<!-- Square card -->
<div class="mdl-card mdl-shadow--2dp demo-card-square">
    <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Card 3</h2>
    </div>
    <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">
            Action
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
    </div>
</div>
<!-- Square card -->
<div class="mdl-card mdl-shadow--2dp demo-card-square">
    <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Card 4</h2>
    </div>
    <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">
            Action
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
    </div>
</div>
<!-- Square card -->
<div class="mdl-card mdl-shadow--2dp demo-card-square">
    <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Card 5</h2>
    </div>
    <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">
            Action
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
    </div>
</div>
<!-- Square card -->
<div class="mdl-card mdl-shadow--2dp demo-card-square">
    <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Card 6</h2>
    </div>
    <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-upgraded=",MaterialButton,MaterialRipple">
            Action
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
    </div>
</div>



</body></html>